<template>
	<div class="box">

		<div class="form">
			<div class="login-way">
				<div class="title">欢迎<b>回来</b></div>
				<div class="subtitle">
					<p>你可以修改你的账号</p>
				</div>
				<div class="inputf">
					<input type="text" v-model="formData.userName" placeholder="用户名" />
					<span class="label">用户名</span>
				</div>
				<div class="inputf">
					<input type="text" v-model="formData.password" placeholder="密码" />
					<span class="label">密码</span>
				</div>
				<div class="inputf">
					<input type="email" v-model="formData.email" :readonly="true" placeholder="邮箱" />
					<span class="label">邮箱不可改</span>
				</div>
				
				<button @click="change()">提交</button>
			</div>
		</div>
		
		<!-- <div style="color: aqua;">sdaddaad</div> -->
	</div>
</template>

<script>
	// import axios from "axios";
	import axios from '../../../apiaxios/axiosInstance';
	import emitter from "@/utils/evenBus";
	
	export default {
		data() {
			return {
				formData: {
					userName: "",
					password: "",
					email: "",
					token:""
				}
			};
		},
		mounted() {
			this.handleSubmit();	
		},
		methods: {
			handleSubmit() {
				// console.log("表单数据：", this.formData);
				// 这里可以添加更多的表单处理逻辑，例如发送请求等
				// console.log(sessionStorage.getItem("user"));
				const user= JSON.parse(sessionStorage.getItem("user"));
				this.formData.userName=user.username;
				this.formData.email=user.email;
				this.formData.password=user.password;
				this.formData.token=user.token;
			},
			change(){
				// console.log(this.formData);
				if(this.formData.password!="" && this.formData.userName!=""){
					axios.put("/backend/user/editInfo", {
						id: null,
						userName:this.formData.userName,
						password:this.formData.password
					}, {
						headers: {
							'Content-Type': 'application/json' ,// 设置请求头为表单编码
							// 'token':`${this.formData.token}`
						}
					}).then(response => {
						// console.log(response);
						if(response.status==200){
							if(response.data.code==200){
								alert("修改成功");
								emitter.emit('setname', this.formData.userName);
							}else{
								alert("邮箱或密码错误");	
							}	
						}else{
							alert("后端响应错误！请过会再试");
						}
					}).catch(error => {
						if (error.response) {
							// 服务器返回了响应，根据状态码等进一步处理
							if (error.response.status === 400) {
								alert("请求参数有误，请检查输入内容");
							} else if (error.response.status === 401) {
								alert("未授权，请检查用户名和密码是否正确");
							} else {
								console.log(error);
								alert("请求出现错误，请稍后再试");
							}
						} else if (error.request) {
							// 请求已经发出，但没有收到响应，可能是网络问题等
							console.log("请求未收到响应，可能是网络问题，请检查网络连接");
							alert("请求出现网络问题，请检查网络连接后重试");
						} else {
							// 其他未知错误情况
							console.log(error);
							alert("请求出现未知错误，请稍后再试");
						}
					});
				}
				else{
					alert("还有信息没填！");
				}
				// editInfo
			}
		}
	};
</script>

<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
		// color: #000;
	}

	.box {
		width: 500px;
		height: 500px;
		padding: 0;
		margin: 0;
		color: #000;
		font-size: 24px;
		display: flex;
		justify-content: center;
		align-items: center;
	}




	.form {
		width: 400px;
		height: 500px;
		background-color: rgba(255, 255, 255, 0.5);
		// background: rgba(17, 25, 40, 0.75);
		background-filter: blur(5px) saturate(0);
		border-radius: 10px;
		border: 1px solid rgba(255, 255, 255, 0.15);
		padding: 40px 60px;
		box-shadow: rgba(50, 50, 93, 0.25) 50px 50px 100px -20px,
			rgba(0, 0, 0, 0.5) 30px 30px 60px -30px,
			rgba(212, 217, 222, 0.35) 2px -2px 6px 0px inset;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: flex-start;
		margin: 0 10px;
		z-index: 3;
		transition: 0.5s ease-in-out;

		&.hidden {
			height: 395px;
			box-shadow: none;
			z-index: 1;
		}

		.title {
			font-size: 18px;
			letter-spacing: 1px;
			color: rgb(92, 92, 92);
			font-weight: 300;
			font-size: 30px;
			b{	
				color: rgb(46, 255, 105);
			}
		}

		.subtitle {
			font-size: 11px;
			color: rgb(45, 44, 47);
			letter-spacing: 1px;
			margin-bottom: 35px;
		}

		.login-way {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: flex-start;

			p {
				// width: 100px;
				// height: 25px;
				margin: 0px 0 -15px 0;
				color: #404040;
				font-size: 18px;
				cursor: pointer;
				transition: 1s ease-in-out;
			}

			p:hover {
				color: #aaaaff;
			}
		}
		

		.inputf {
			width: 100%;
			position: relative;
			margin-bottom: 35px;
			transition: 1s ease-in-out;

			input {
				width: 100%;
				height: 35px;
				border: none;
				outline: 1.5px solid rgb(171, 171, 171);
				background: transparent;
				border-radius: 8px;
				font-size: 12px;
				padding: 0 15px;
				color: rgb(0, 0, 0);

				&::placeholder {
					color: rgb(83, 181, 190);
				}

				&:focus {
					outline: 1.5px solid rgb(164, 240, 221);

					&::placeholder {
						opacity: 0;
					}

					&+.label {
						opacity: 1;
						top: -20px;
					}
				}

				&:not(:placeholder-shown)+.label {
					opacity: 1;
					top: -20px;
					// border: #fff 1px solid;
				}
			}

			.label {
				position: absolute;
				top: 0;
				left: 0;
				color: rgb(83, 181, 190);
				font-size: 11px;
				font-weight: bold;
				transition: 0.25s ease-out;
				opacity: 0;
			}
		}
		button{
			width: 50%;
			height: 30px;
			margin: 0 68px;
			color: #aaaaff;
		}
	}
</style>